<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="imagetoolbar" content="no" />
        <meta name="keywords" content="網頁設計,平面設計,插畫" />
        <meta name="description" content="DFUNS個人網站與美工網頁設計教學,CSS,FLASH" />
        <meta name="copyright" content="本網頁著作權 DFUNS 2000-2010 All Rights Reserved."/>
        <meta name="author" content="DFUNS by Away" />
        <title>=DFUNS™= CSS語法教學-滑入式選單</title>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }
            body {
                font:10pt/1.4em Arial, Helvetica, sans-serif;
                background-color: #000;
                width: 716px;
                margin: 0px auto;
                padding:20px 0px;
            }
            div#navi {
                width: 25px;
                height: 360px;
                float: left;
                /*border: 1px red dashed;*/
            }
            .menuLink li {
                position: relative;
                list-style-type: none;
                border: 1px solid #FFF;
                margin-top: -1px;
            }
            .menuLink li a{
                text-indent: -3000px;
                display: block;
                background: url(images/menu.gif) no-repeat;
                width: 23px;
                height: 118px;
            }
            .menuLink li .ps {background-position: 0px 0px;}
            .menuLink li .vaio {background-position: 0px -120px;}
            .menuLink li .bravia {background-position: 0px -240px;}

            .menuLink li .ps:hover, .menuLink li .ps:focus {background-position: -25px 0px;}
            .menuLink li .vaio:hover, .menuLink li .vaio:focus {background-position: -25px -120px;}
            .menuLink li .bravia:hover, .menuLink li .bravia:focus {background-position: -25px -240px;}

            .menuLink li ul {
                display: none;
            }
            .menuLink li:hover ul {
                height: 110px;
                width: 465px;
                background-color: #234;
                padding-top: 7px;
                padding-left: 5px;
                margin-left: -1px;
                position: absolute;
                top: 0px;
                left: 25px;
                /*visibility: visible;*/
                display: inline;
                filter: Alpha(Opacity=80);
                opacity:.8;
            }
/*            .menuLink li ul {
                height: 110px;
                width: 465px;
                background-color: #234;
                padding-top: 7px;
                padding-left: 5px;
                margin-left: -1px;
                position: absolute;
                top: 0px;
                left: 25px;
                visibility: hidden;
                filter: Alpha(Opacity=80);
                opacity:.8;
            }*/
            /*.menuLink li:hover ul {visibility: visible;}*/
            .menuLink li ul li{
                float:left;
                margin: 2px 7px;
                display: inline;
                border-bottom-width: 1px;
                border-bottom-style: solid;
                border-bottom-color: #666;
                border-top-style: none;
                border-right-style: none;
                border-left-style: none;
                border: 1px red dashed;
            }
            .menuLink li ul li a {
                text-decoration: none;
                color: #CCC;
                text-indent: 0;
                display: block;
                background-image: none;
                width:100px;
                height:18px;
                padding-top: 2px;
            }
            .menuLink li ul li a:hover {color: #FFF;}
            #content {
                font-size: 0.9em;
                color: #999;
                background: #000 url(images/photo.jpg) no-repeat 30px 0px;
                width: 630px;
                height: 206px;
                float: left;
                border: 1px solid #FFF;
                margin-top: -1px;
                margin-left: -1px;
                margin-bottom: 20px;
                padding-top: 150px;
                padding-right: 30px;
                padding-bottom: 0px;
                padding-left: 30px;
            }
            #content p {margin-bottom: 10px;}
            #content p a {color: #9CF;}
            .tips {
                color:#CCC;
                text-align: center;
                height: 25px;
                width: 400px;
                clear: both;
                padding-top: 10px;
                border: 1px dotted #FFF;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 1.2em;
                font-weight: bold;
                color: #999;
                margin: 20px auto;
            }
            #footer {
                color: #FFF;
                height: 50px;
                width: 694px;
                clear: both;
                padding: 10px;
                text-align: center;
                border: 1px solid #666;
                margin-top: 0px;
                margin-right: auto;
                margin-bottom: 0px;
                margin-left: auto;
            }
            #footer h1 {
                font-size: 2em;
                line-height: 1.2em;
            }
            #footer a {
                color: #999;
            }
        </style>
    </head>

    <body>
        <div id="navi">
            <ul class="menuLink">
                <li><a href="#" class="ps">PlayStation</a>
                    <ul>
                        <li><a href="#">主機及周邊配件</a></li>
                        <li><a href="#">PS3遊戲軟體</a></li>
                        <li><a href="#">PSP遊戲軟體</a></li>
                        <li><a href="#">PS全系列主機</a></li>
                        <li><a href="#">PS3主機(250GB)</a></li>
                        <li><a href="#">PS3主機(120GB)</a></li>
                        <li><a href="#">影像色差連接線</a></li>
                        <li><a href="#">震動式無線遙控</a></li>
                        <li><a href="#">HDMI傳輸線</a></li>
                        <li><a href="#">CECHZR1T </a></li>
                        <li><a href="#">高速存取記憶卡</a></li>
                        <li><a href="#">無線鍵盤 </a></li>
                        <li><a href="#">HDMI 傳輸線</a></li>
                        <li><a href="#">HDMI 傳輸線</a></li>
                    </ul>
                </li>
                <li><a href="#" class="vaio">VAIO</a>
                    <ul>
                        <li><a href="#">VAIO筆記型電腦</a></li>
                        <li><a href="#">VAIO家用電腦</a></li>
                        <li><a href="#">屬攜行包</a></li>
                        <li><a href="#">滑鼠及其他配件</a></li>
                        <li><a href="#">變壓器</a></li>
                        <li><a href="#">充電電池</a></li>
                        <li><a href="#">隨身碟</a></li>
                        <li><a href="#">擴充基座</a></li>
                        <li><a href="#">VAIO全系列電腦</a></li>
                        <li><a href="#">儲存設備</a></li>
                        <li><a href="#">雷射藍牙滑鼠</a></li>
                        <li><a href="#">外接式燒錄器 </a></li>
                        <li><a href="#">Sony藍光光碟機</a></li>
                    </ul>
                </li>
                <li><a href="#" class="bravia">BRAVIA</a>
                    <ul>
                        <li><a href="#">LCD液晶電視</a></li>
                        <li><a href="#">家庭劇院</a></li>
                        <li><a href="#">音響組合</a></li>
                        <li><a href="#">藍光播放機</a></li>
                        <li><a href="#">DVD錄放影機</a></li>
                        <li><a href="#">HiFi音響單機</a></li>
                        <li><a href="#">家庭劇院投影機</a></li>
                        <li><a href="#">商用液晶投影機</a></li>
                        <li><a href="#">商用顯示器</a></li>
                        <li><a href="#">影音視聽配件</a></li>
                        <li><a href="#">藍光影片</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div id="content">
            <p>Sony是全球唯一同時擁有硬體及內容的公司，集團旗下公司跨足各種不同的領域，包括電子、遊戲、音樂、影視、網路、金融等等。在進入數位寬頻時代，硬體及內容的整合日趨重要，Sony所擁有的優勢也逐漸顯現出來，成為全球獨一無二的個人寬頻娛樂公司。</p>
            <p>身為全球的電子領導廠商，Sony公司成立後便不斷以創新及研發，引領市場潮流，並且從1970年代開始投入高畫質(HD)相關技術的開發，累積了豐富的經驗與技術，並具有最完整的產品線。不論是拍攝、儲存、編輯、播放、顯示等各領域，皆率先推出高畫質(HD)的商品，並發揮充分Sony公司獨有的優勢，整合硬體及內容，全方位打造高畫質世界(HD   World)的頂級娛樂新風潮。</p>
            <p><a href="http://www.sony.com.tw" target="_blank">Sony Style</a></p>
        </div>
        <div class="tips">適用於IE7、IE8、FireFox、Chrome</div>
        <div id="footer">
            <h1>CSS語法教學 │滑入式選單│</h1>
            <p>DFUNS教學網範例 = <a href="http://www.dfuns.idv.tw">http://www.dfuns.idv.tw</a> =</p>
        </div>
    </body>
</html>
